主題

昨天我們完成了 關卡難度選擇與執行時間顯示，遊戲已經能完整跑起來。不過一個好玩的數獨遊戲，除了基本的規則檢查與勝利判斷之外，互動體驗才是能讓玩家持續遊玩的關鍵。

目標

今天的重點是新增兩個功能：

• 數字快捷選擇面板
• 高亮提示（Highlight）

數字快捷選擇面板

在傳統數獨遊戲中，玩家通常需要先點擊某個格子，然後再輸入數字。對於電腦版或手機版來說，這可能有點繁瑣。
因此，我們可以在畫面邊設置一個 數字快捷面板 (1~9)，讓玩家可以直接用滑鼠點擊數字，然後填入當前選取的格子。

程式邏輯

• 建立一排按鈕（1~9）。
• 當點擊按鈕時，將數字記錄為「當前選擇數字」。
• 若玩家選中盤面上的某個格子，再點擊數字，則將該數字填入。

var numberButtonValues = [3][3]int{
	{
		1, 2, 3,
	},
	{
		4, 5, 6,
	},
	{
		7, 8, 9,
	},
}

func (gameLayout *GameLayout) detectNumberButtonHandler() {
	if inpututil.IsMouseButtonJustPressed(ebiten.MouseButtonLeft) {
		xPos, yPos := ebiten.CursorPosition()
		xPos -= (BoardWidth + cellSize/2)
		yPos -= (ScreenHeight - 3*cellSize)
		// detect range
		if xPos >= 0 && xPos <= 3*cellSize &&
			yPos >= 0 && yPos <= 3*cellSize {
			row := yPos / cellSize
			col := xPos / cellSize
			gameLayout.handleNumberButtonClick(row, col)
		}
		return
	}
}

執行畫面如下

這樣一來，玩家不用切換鍵盤，單靠滑鼠就能快速遊玩。

高亮提示（Highlight）

另一個常見的 UX 功能是「數字高亮」。
當玩家選中某個數字時，可以自動 高亮盤面上相同的數字，方便觀察整體分布。
並且把相關的格子都標示起來

程式邏輯

1. 當玩家點擊格子或數字快捷面板，記錄 CurrentNum。
2. 在繪製格子時，若該格子的數字 == CurrentNum，則用不同顏色背景繪製。

func (gameLayout *GameLayout) drawHighLightCell(screen *ebiten.Image, row, col int) {
	board := gameLayout.gameInstance.Board
	cursorRow := board.CursorRow
	cursorCol := board.CursorCol

	// 跳過自己
	if row == cursorRow && col == cursorCol {
		return
	}

	// highLight relative row, col
	if row == cursorRow || col == cursorCol {
		gameLayout.drawHighLightCover(screen, row, col)
		return
	}
	boxSize := game.BoxSize
	boxRow := (cursorRow / boxSize) * boxSize
	boxCol := (cursorCol / boxSize) * boxSize
	// highLight Box value check
	for r := 0; r < boxSize; r++ {
		for c := 0; c < boxSize; c++ {
			br := boxRow + r
			bc := boxCol + c
			if br == row && bc == col {
				gameLayout.drawHighLightCover(screen, row, col)
				break
			}
		}
	}
	// hightLight Same Value
	cursorCell := board.Cells[cursorRow][cursorCol]
	targetCell := board.Cells[row][col]
	// 空值則跳過
	if cursorCell.Type == game.Empty || targetCell.Type == game.Empty {
		return
	}

	if cursorCell.Value == targetCell.Value {
		gameLayout.drawHighLightCover(screen, row, col)
	}
}

執行畫面

這樣一來，玩家輸入數字後能更清楚看到目前的分布，減少錯誤。

github action 測試結果

https://github.com/leetcode-golang-classroom/sudoku-game/actions/runs/17619902931

本日收穫

今天我們在數獨遊戲中，加入了兩個提升體驗的互動功能：

• 數字快捷選擇面板：簡化輸入流程，讓玩家快速輸入數字。
• 高亮提示：幫助玩家觀察整體數字分布，避免重複填錯。

這些小細節，讓遊戲更貼近真實的數獨 App 體驗。